<template>
	<view style="font-size: 17px;">
		<view class="already-ziti-box" v-if="isYongyou">
			<view class="tips">您目前拥有的自提品牌</view>
			<view v-if="yiyongyouList.length>0" style="display: flex;">
				<view class="pinpai-box" v-for="(item,i) in yiyongyouList" :key="item.id">
					<div class="pinpais">
						<image :src="swichLogo(item.logo)" class="pinpai-img">
						<div class="leixing">{{item.typeName}}</div>
						<div class="pinpaiName">{{item.name}}</div>
					</div>
				</view>
			</view>
		</view>
		<view class="pick-ziti-box">
			<view class="tips" v-if="isKeShenQing">您可以申请的自提品牌</view>
			<view v-if="keshenqingList.length>0" style="display: flex;">
				<view class="pinpai-box" v-for="(item,i) in keshenqingList" :key="item.id">
					<div class="pinpais" :class="item.isSelect?'active':''" @click="updSelect(i,item.ppId,item.money,item.logo)">
						<image :src="swichLogo(item.logo)" class="pinpai-img">
						<div class="leixing">{{item.typeName}}</div>
						<div class="pinpaiName">{{item.name}}</div>
						<image src="../../static/center/gou.png" class="gou" />
					</div>
				</view>
			</view>
			<view class="notoshow" v-if="!isKeShenQing" style="line-height: 200px;text-align: center;height: 200px;">
			   <view>没有可供申请的自提品牌</view>
			</view>
		</view>
		<view style="font-size: 14px;">
			<span style="color: red;">温馨提示:</span>
			成为品牌的自提点需要先支付保证金,复购才能拥有更低的购买价格,选中可以申请的自提品牌,点击下一步申请自提点
		</view>
		<view style="text-align: right;padding-right: 10px;font-weight: bold;line-height: 3px;color: green;" v-if="isLocate" @click="setZitiLocate()">下一步:设置自提位置</view>
		<view style="text-align: right;padding-right: 10px;font-weight: bold;line-height: 3px;color: green;" v-if="isPay" @click="gopay()">下一步:支付保证金</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId:'',			//用户ID
				yiyongyouList:[],	//已拥有的自提品牌集合
				keshenqingList:[],	//可申请的自提品牌集合
				isLocate:false,		//是否显示（下一步:设置自提位置）
				isPay:false,		//是否显示（下一步:支付保证金）
				isYongyou:true,		//是否显示（目前拥有的自提品牌）
				isKeShenQing:true,	//是否显示（可以申请的自提品牌）
				ppid:'',			//选中的品牌ID
				money:'',			//选中的品牌会员价格
				logo:'',			//选中的品牌图片
			}
		},
		onLoad() {
			// this.verifyLogin()
			this.getInitInfo()
		},
		methods: {
			//验证是否登录
			verifyLogin(){
				let userId = uni.getStorageSync('usersId');//用户ID
				this.userId = userId;
				if(userId==null || userId=="" || userId==undefined){
					this.$u.toast("请先登录")
					setTimeout(() => {
						uni.navigateTo({
							url:'../../pages/center/login'
						})
					},500)
				}
			},
			//得初始数据
			getInitInfo(){
				//根据用户编号查询已拥有的自提品牌
				this.$http.get('/ppUserPingpai/selectKeShenqinPingpai',{
					userId:8580,
					status:1
				}).then(res => {
					if(res.data.data.ppPingpais.length>0){
						this.yiyongyouList = res.data.data.ppPingpais;
						this.isPay = true;
					}else{
						this.isLocate = true;
						this.isYongyou = false;
					}
				})
				//根据用户编号查询可以申请的自提品牌
				this.$http.get('/ppUserPingpai/selectKeShenqinPingpai',{
					userId:8580,
					status:0
				}).then(res => {
					if(res.data.data.ppPingpais.length>0){
						// this.keshenqingList = res.data.data.ppPingpais;
						for(let i=0;i<res.data.data.ppPingpais.length;i++){
							let obj={	};
							obj.logo = res.data.data.ppPingpais[i].logo;
							obj.typeName = res.data.data.ppPingpais[i].typeName;
							obj.name = res.data.data.ppPingpais[i].name;
							obj.ppId = res.data.data.ppPingpais[i].id;
							obj.status = res.data.data.ppPingpais[i].status;
							obj.isSelect= false;
							this.keshenqingList.push(obj);
						}
						// console.log(this.keshenqingList)
					}else{
						this.isPay = false;
						this.isLocate = false;
						this.isKeShenQing = false;
					}
				})
			},
			//显示品牌图片
			swichLogo(logo){
				if(logo.length>0){
					return this.host+'/image/pingpaiLogo/'+logo
				}
			},
			//修改是否选中
			updSelect(m,ppId,money,logo){
				// console.log("选中品牌了："+ppId+" 下标："+m+" 金额："+money+" 品牌图片："+logo)
				let status = this.keshenqingList[m].status;
				if(status==0){
					this.$u.toast("该品牌已被禁用")
					return
				}
				this.ppid = this.keshenqingList[m].ppId;
				this.money = money;
				this.logo = logo;
				for(let i=0;i<this.keshenqingList.length;i++){
					if(m==i){
						this.keshenqingList[i].isSelect = true;
					}else{
						this.keshenqingList[i].isSelect = false;
					}
				}
			},
			//设置自提地址
			setZitiLocate(){
				if(this.isNull(this.ppid)){
					this.$u.toast("请先选择自提品牌")
				}else{
					uni.navigateTo({
						url:'addZitiAddress?ppid='+this.ppid
					})
				}
			},
			//支付保证金
			gopay(){
				if(this.isNull(this.ppid)){
					this.$u.toast("请先选择自提品牌")
				}else{
					uni.navigateTo({
						url:'../pay/submitOrder?money='+this.money+'&ppid='+this.ppid+'&gimages='+'/image/pingpaiLogo/'+this.logo+'&yongyouNum='+this.yiyongyouList.size()+'&id=1'
					})
				}
			},
			//判空
			isNull(str){
				return str==null || str=="" || str==undefined
			}
		}
	}
</script>

<style>
	.pick-ziti-box{
		padding-top: 20px;
		margin-bottom: 5px;
		background-color: white;
	}
	.already-ziti-box{
		padding-top: 10px;
		margin-bottom: 20px;
		background-color: white;
	}
	.pinpai-box::after{
		content: '';
		width: 150px;
		/*display: none;*/
	}
	.pinpai-box{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.pinpais .pinpai-img{
		width: 150px;
		height: 150px;
	}
	.pinpais{
		background-color: white;
		text-align: center;
		margin-bottom: 20px;
		position: relative;
	}
	/* .pick-ziti-box .active .gou{
		display: block;
	} */
	.pick-ziti-box .active{
		border: 1px solid red;
	}
	.pick-ziti-box .gou{
		position: absolute;
		right: 0px;
		bottom: 0px;
		display: none;
	}
	.tips{
		text-align: center;
	}
</style>
